<template>
  <el-card
    ><!-- 用户列表 -->
    <el-table :data="list" border style="width: 100%" v-loading="loading">
      <el-table-column
        type="index"
        width="60"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column prop="userName" align="center" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="postTotal" align="center" label="发布帖子数">
      </el-table-column>
      <el-table-column prop="signTotal" label="本月签到数" align="center">
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template #default="scope">
          <el-tooltip content="取消关注" placement="top" :enterable="false">
            <!-- 删除按钮 -->
            <el-button
              size="mini"
              type="danger"
              :icon="Delete"
              @click="unFollow(scope.row.userId)"
              >取消关注</el-button
            >
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination
  ></el-card>
</template>

<script setup lang="ts">
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, getCurrentInstance, ComponentInternalInstance, reactive, onMounted } from 'vue';

const { appContext } = getCurrentInstance() as ComponentInternalInstance;
const proxy = appContext.config.globalProperties;

// 关注列表
const followList = ref([]);
// 是否正在加载中
const loading = ref(true);
// 获取关注列表的页码参数对象
const queryInfo = reactive({
  // 当前的页数
  pageNum: 1,
  // 当前每页显示的数据条数
  pageSize: 1,
});
// 关注列表总条数
const total = ref(0);
interface List {
  userId: Number
  userName: String
  postTotal: Number
  signTotal: Number
}
const list = ref<List[]>([]);

onMounted(() => {
  getFollowList();
})

// 获取我关注的用户列表
function getFollowList() {
  loading.value = true;
  list.value = [];
  proxy.$request.follow
    .myfollows({
      userId: proxy.$storage.getItem('userInfo').userId,
      pageNum: queryInfo.pageNum,
      pageSize: queryInfo.pageSize,
    })
    .then((res: any) => {
      if (res.code === '204') {
        loading.value = false;
        return ElMessage({
          message: res.msg,
          type: 'warning',
          duration: 1000,
        });
      }
      followList.value = res.data.list;
      followList.value.forEach((item: any) => {
        proxy.$request.discussPost
          .own({ pageNum: 1, pageSize: 1 }, item.userId)
          .then((res1: any) => {
            proxy.$request.userSign.mothLive(item.userId).then((res2: any) => {
              list.value.push({
                userId: item.userId,
                userName: item.userName,
                postTotal: res1.data ? res1.data.total : 0,
                signTotal: res2.data > 0 ? res2.data : '/',
              });
              loading.value = false;
            });
          });
      });
      total.value = res.data.total;
    });
};
// 监听 pagesize 改变
function handleSizeChange(newSize: any) {
  queryInfo.pageSize = newSize;
  getFollowList();
};
// 监听页码值改变
function handleCurrentChange(newNum: any) {
  queryInfo.pageNum = newNum;
  getFollowList();
};
// 取消关注
function unFollow(userId: any) {
  ElMessageBox.confirm('此操作将取消对该用户的关注, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      proxy.$request.follow
        .state({
          followAction: 0,
          followUserId: userId,
          isFollowed: 1,
          userId: proxy.$storage.getItem('userInfo').userId,
        })
        .then((res: any) => {
          ElMessage({
            type: 'success',
            message: res.msg,
            duration: 1000,
          });
          followList.value = [];
          getFollowList();
        });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消操作',
        duration: 1000,
      });
    });
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 10px;
}
</style>
